<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- 
	Functional
	Use for display
		- SubProduct Name
		- SubProduct description
		- Product list
 -->
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	    		xmlns:ui="http://java.sun.com/jsf/facelets"
	  			xmlns:h="http://java.sun.com/jsf/html"
	  			xmlns:f="http://java.sun.com/jsf/core"
	  			xmlns:c="http://java.sun.com/jsp/jstl/core"
	  			xmlns:p="http://primefaces.prime.com.tr/ui"
				template="/WEB-INF/layouts/standard.xhtml">
	
	<ui:define name="content">
		<p:breadCrumb id="breadcrumb">
			<p:menuitem value="Home" url="product" />
			<p:menuitem value="Overall Product" url="product" />
			<p:menuitem value="#{subProduct.name}" url="#" />
		</p:breadCrumb>
		<h:panelGroup layout="block" style="padding-top: 10px;overflow:hidden;">
			<h:panelGroup layout="block" style="vertical-align: top;float:left;padding-right: 10px;">
				<h:form>
					<p:menu>
						<c:forEach items="#{main_products}" var="mp">
							<p:submenu label="#{mp.name}">
								<c:forEach items="#{mp.vtSubproducts}" var="sp">
									<p:menuitem>
										<h:commandLink  value="#{sp.name}" action="viewSubProduct" >
											<f:setPropertyActionListener target="#{flowScope.subProduct}" value="#{sp}" />
										</h:commandLink>
							    	</p:menuitem>
						    	</c:forEach>
							</p:submenu>
						</c:forEach>
					</p:menu>
				</h:form>
			</h:panelGroup>
			<h:panelGroup layout="block" style="display:table-cell;width:777px;">
				<p:panel style="width:100%;" styleClass="news-panel-content">
					<h:outputText value="#{subProduct.name}" styleClass="information-header" />
            		<h:outputText value="#{subProduct.description}" escape="false"/>  
					<h:form prependId="false" style="padding-top:15px;">
		                <table width="100%" cellspacing="0" cellpadding="0" border="0" style="background: none; padding: 0px;">
		                    <tbody>
		                    	<c:forEach items="#{products}" var="product">
		                    		<tr>
		                    			<td style="width: 200px;text-align:center;">
			                                <p:commandLink>
			                                    <p:graphicImage value="/images/temp/ipad2.jpg" />
			                                </p:commandLink>
			                            </td>
			                            <td style="vertical-align: top;">
			                                <h:outputText styleClass="sub-information-header" value="#{product.name}"/>
			                                <h:outputText value="#{product.description}" escape="false"/>
			                                <p:spacer width="5" height="0" />
			                                <h:commandLink styleClass="information-link" action="viewProductDetail">
			                                    <h:outputText value="more..." />
			                                    <f:setPropertyActionListener target="#{flowScope.product}" value="#{product}" />
			                                </h:commandLink>
			                            </td>
		                    		</tr>
		                    	</c:forEach>
		                        <tr>
		                            <td style="width: 200px;text-align:center;">
		                                <p:commandLink>
		                                    <p:graphicImage value="/images/temp/ipad2.jpg" />
		                                </p:commandLink>
		                            </td>
		                            <td style="vertical-align: top;">
		                                <h:outputText styleClass="sub-information-header" value="Poll"/>
		                                <h:outputText value="The story begins as Don Vito Corleone" />
		                                <p:spacer width="5" height="0" />
		                                <p:commandLink styleClass="information-link">
		                                    <h:outputText value="more..." />
		                                </p:commandLink>
		                            </td>
		                        </tr>
		                        <tr>
		                            <td style="width: 200px;text-align:center;">
		                                <p:commandLink>
		                                    <p:graphicImage value="/images/temp/ipodtouch.jpg" />
		                                </p:commandLink>
		                            </td>
		                            <td style="vertical-align: top;">
		                                <h:outputText styleClass="sub-information-header" value="Megazine"/>
		                                <h:outputText value="The story begins as Don Vito Corleone" />
		                                <p:spacer width="5" height="0" />
		                                <p:commandLink styleClass="information-link">
		                                    <h:outputText value="more..." />
		                                </p:commandLink>
		                            </td>
		                        </tr>
		                        <tr>
		                            <td style="width: 200px;text-align:center;">
		                                <p:commandLink>
		                                    <p:graphicImage value="/images/temp/ipodtouch.jpg" />
		                                </p:commandLink>
		                            </td>
		                            <td style="vertical-align: top;">
		                                <h:outputText styleClass="sub-information-header" value="Deal"/>
		                                <h:outputText value="The story begins as Don Vito Corleone" />
		                                <p:spacer width="5" height="0" />
		                                <p:commandLink styleClass="information-link">
		                                    <h:outputText value="more..." />
		                                </p:commandLink>
		                            </td>
		                        </tr>
		                    </tbody>
		                </table>
		            </h:form>
				</p:panel>
			</h:panelGroup>
		</h:panelGroup>
	</ui:define>
				
</ui:composition>